<template>
  <div class="app-container">
    <h5 class="titleInfo">用户基础信息</h5>
    <el-form ref="form"  :model="params" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="手机号" prop="username ">
            <!-- <template slot-scope="scope">
              <span>{{scope.row}}</span>
            </template>-->
            <span>{{params.username}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="会员姓名" prop="realname">
            <span>{{params.realname}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="昵称" prop="nickName">
            <span>{{params.nickName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="奖励类型" prop="rewardType">
            <el-select v-model="params.rewardType">
              <el-option
                v-for="item in rewardOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入账状态" prop="status">
            <el-select v-model="params.status">
              <el-option
                v-for="item in AccountEntry"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <!-- <el-option label="不入账" :value="2"></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="params.status==0">
          <el-form-item label="入账时间" prop="time">
            <el-date-picker
              v-model="params.time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="奖励" prop="amount">
            <el-input v-model="params.amount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="params.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="subimet('form')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { RevisionAward, editDetails } from "@/api/ServiceManagement";

export default {
  name:'remainderchange',
  data() {
    const numberReg = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入奖励的数量"));
      } else {
        var reg = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请录入正确的数值格式"));
        }
      }
    };
    return {
      value1: "",
      params: {
        userId: 0,
        rewardType: 0,
        status: 0,
        time: "",
        amount: "",
        remark: ""
      },
      rules: {
        rewardType: [
          { required: true, message: "请选择奖励类型", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择入账状态", trigger: "blur" }
        ],
        time: [{ required: true, message: "请选择入账时间", trigger: "blur" }],
        amount: [{ required: true, validator: numberReg, trigger: "blur" }]
      },
      //奖励类型下拉框
      rewardOption: [
        { id: 11, name: "业绩奖励（系统加减）" },
        { id: 12, name: "团队奖励（系统加减）" }
      ],
      //入账状态下拉框
      AccountEntry: [{ id: 1, name: "立即入账" }, { id: 0, name: "不入账" }]
    };
  },
  inject: ["reload"],
  mounted() {
    // console.log(this.$route.query.userId);
    const data = this.$route.query.username;
    this.getDetails({ phone: data });
  },
  methods: {
    getDetails(e) {
      RevisionAward(e).then(res => {
        // console.log(res);
        if (res.status == 200) {
          this.params = res.data.data;
        }
      });
    },
    //提交
    subimet(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          const dataInfo = {
            userId: this.params.userId,
            rewardType: this.params.rewardType,
            status: this.params.status,
            time: this.params.time,
            amount: this.params.amount,
            remark: this.params.remark
          };
          editDetails(dataInfo)
            .then(res => {
              console.log(res);
              if (!res.data.code) {
                this.succStatus("提交成功");
                this.$router.push("/severaccount");
                this.reload();
              } else {
                alert(111)
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
              this.tableLoading = false;
            })
            .catch(err => {
              this.errorStatus(err.msg);
              this.tableLoading = false;
            });
        } else {
          this.submitInfoVisible = true;
          this.warningStatus("有必填项未填，不能提交哦!");
          return false;
        }
      });
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 警告状态弹窗
    warningStatus(txt) {
      this.eleMsg(txt, "warning");
    }
  }
};
</script>